/**
  * @Author: songgh
  * @Date: 2021-09-20 14:41:08
  * @LastEditors: songgh
  * @LastEditTime: 2021-09-20 15:41:08
  * @Description: typescript & vue3 示例
  */

import { defineComponent } from "@vue/runtime-core";
import { computed, ref } from "vue";
import { Store, useStore } from "vuex";

export default defineComponent({
    name: "Example",
    setup() {
      const store: Store<any> = useStore();
      const loadNum = ref<Number>(store.state.app.loadNum);
      const app = computed(()=>store.state.app);
      
      return {
        loadNum,
        store,
        app
      };
    },
    mounted() {},
    watch: {
      loadNum: {
        handler(data) {
          this.store.dispatch("app/setLoadNum", data);
        },
      },
    },
    render(){
      return (
            <div class="example">
                <a-input-number
                    id="inputNumber"
                    v-model:value={this.loadNum}
                    min={-100}
                    max={100}
                />
                <div>var-loadNum: { this.loadNum }</div>
                <div>store-app-loadNum: { this.app.loadNum}</div>
                <div class="h-80 w-80 bg-red-600"></div>
                <hello-world />
                {/*  */}
            </div>
        )
    }
});